CSSで枠線を描画 (1)枠線描画の基本
画像をページに張り込むIMGタグでは、border属性を指定することにより枠線を描画することができます。スタイルシートを利用すると、IMGタグと同様に、あらゆるタグに枠線を描画できるようになります。今回は、スタイルシートを使った枠線描画の基本を紹介してみましょう。

→ 枠線の形式を指定する
 
スタイルシートを使って枠線を描画するときは、まず最初に枠線の形式を指定しなければいけません。この指定にはスタイルシート「border-style:」を使用します。「border-style:」に指定できる値は、通常の枠線である「solid」や立体枠線「outset」など、いくつかの種類が用意されています。サンプルページに枠線形式の一覧を示しておくので参照してみてください。
<P style="border-style:solid">
この枠線の形式は<B>「solid」</B>です。
</P>
<P style="border-style:double">
この枠線の形式は<B>「double」</B>です。
</P>
<P style="border-style:dashed">
この枠線の形式は<B>「dashed」</B>です。
</P>
<P style="border-style:dotted">
この枠線の形式は<B>「dotted」</B>です。
</P>
<P style="border-style:groove">
この枠線の形式は<B>「groove」</B>です。
</P>
<P style="border-style:ridge">
この枠線の形式は<B>「ridge」</B>です。
</P>
<P style="border-style:inset">
この枠線の形式は<B>「inset」</B>です。
</P>
<P style="border-style:outset">
この枠線の形式は<B>「outset」</B>です。
</P>
<P style="border-style:none">
この枠線の形式は<B>「none」</B>です(初期値、枠線は表示されません)。
</P>
<P style="border-style:hidden">
この枠線の形式は<B>「hidden」</B>です(枠線は表示されません)。
</P>


→ 枠線の太さを指定する
 
「border-style:」により描画した枠線は、その太さを変更することも可能です。枠線の太さの指定には「border-width:」を使用します。「border-width:」に指定できる値は、「○px」(ピクセル数指定)のほか、「thin」「medium」「thick」といった指定も可能です。
<P style="border-style:solid ; border-width:1px">
この枠線の太さは<B>「1px」</B>です。
</P>
<P style="border-style:dashed ; border-width:5px">
この枠線の太さは<B>「5px」</B>です。
</P>
<P style="border-style:outset ; border-width:10px">
この枠線の太さは<B>「10px」</B>です。
</P>


→ 枠線の色を指定する
 
さらに「border-color:」を指定すると、枠線の色を変更することも可能です。色の指定は、「#」を使った16進数RGBのほか、色の名前で指定することもできます。
<P style="border-style:dotted ; border-width:5px ; border-color:#008000">
この枠線の色は<B>「#008000」</B>です。
</P>
<P style="border-style:inset ; border-width:5px ; border-color:red">
この枠線の色は<B>「red」</B>です。
</P>


e[NECir Yahoo yV LINEf[^[z500~`I
z[y[W NWbgJ[h COiq@COsI COze